<template>
  <view class="container">
    <!-- 头部区域 -->
    <view class="header">
      <text class="title">{{ projectDetail.title }}</text>
      <view class="meta">
        <view class="date">{{ projectDetail.date }}</view>
        <view class="tag">{{ projectDetail.tag }}</view>
      </view>

      <view class="divider"></view>

      <!-- 只有非VIP用户才显示广告 -->
      <view class="app-promo" >
        <!-- 微信小程序广告组件 -->
        <ad-custom v-if="isWechat" :unit-id="adUnitId" :ad-intervals="30"></ad-custom>
        <!-- H5 或其他平台的占位符/默认广告图 -->
        <view v-else class="ad-banner-placeholder">
          <text class="ad-text">广告位 (非微信环境)</text>
        </view>
      </view>
    </view>
	<view></view>
    <!-- 内容区域 -->
    <view class="content">
      <text class="section-title">{{ projectDetail.contentTitle }}</text>

      <view class="project-desc">
        <text class="subtitle">{{ projectDetail.projectIntro.title }}</text>
        <text class="desc-text">
          {{ projectDetail.projectIntro.description }}
          <text class="highlight">{{ projectDetail.projectIntro.highlight1 }}</text>
          {{ projectDetail.projectIntro.middleText }}
          <text class="highlight">{{ projectDetail.projectIntro.highlight2 }}</text>
          {{ projectDetail.projectIntro.endText }}
        </text>
      </view>

      <view class="course-section">
        <text class="section-title">{{ projectDetail.courseCatalog.title }}</text>

        <view class="course-list">
          <view class="course-item" v-for="(item, index) in projectDetail.courseCatalog.items" :key="index">
            <view class="course-title">
              <!-- 保留原 iconClass 逻辑（若 item.iconClass 是 Font Awesome 类名，需替换为对应 SVG，这里先兼容原结构） -->
              <svg v-if="item.iconClass === 'fas fa-code'" class="icon" viewBox="0 0 512 512" width="20" height="20">
                <path fill="currentColor" d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.7 18.7 18.7 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM172.4 416c-19.1 0-34.7-15.6-34.7-34.7s15.6-34.7 34.7-34.7 34.7 15.6 34.7 34.7-15.6 34.7-34.7 34.7z"/>
              </svg>
              <svg v-else-if="item.iconClass === 'fas fa-terminal'" class="icon" viewBox="0 0 416 512" width="20" height="20">
                <path fill="currentColor" d="M208 0C93.1 0 0 93.1 0 208s93.1 208 208 208 208-93.1 208-208S322.9 0 208 0zm-16 368h-64v-64h64v64zm128 0h-64v-64h64v64zm-64-128h-64v-64h64v64zm128 0h-64v-64h64v64zm-128-128h-64V72h64v48z"/>
              </svg>
              <!-- 可根据实际 item.iconClass 扩展更多 SVG 图标 -->
              <text>{{ item.title }}</text>
            </view>
            <text>{{ item.description }}</text>
            <view class="features">
              <view class="feature" v-for="(feature, fIndex) in item.features" :key="fIndex">
                <!-- 替换 fas fa-check-circle 为内联 SVG -->
                <svg class="icon" viewBox="0 0 512 512" width="14" height="14">
                  <path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"/>
                </svg>
                <text>{{ feature }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="learn-btn-container">
        <view class="learn-btn" @click="handleLearn">
          {{ projectDetail.learnButton }}
        </view>
      </view>
    </view>

    <!-- 底部导航（已注释，若需启用需同步替换图标） -->
  <!--  <view class="mobile-nav">
      <view class="nav-item" :class="{ active: activeTab === 'home' }" @click="setActive('home')">
        <svg class="icon" viewBox="0 0 576 512" width="20" height="20">
          <path fill="currentColor" d="M547.2 226.6c4.4-4 4.5-10.9.3-15.3l-24-27.6c-4.2-4.8-11.3-5.1-16-.5L488 215.4V64c0-17.7-14.3-32-32-32H320c-11.3 0-21.4 6.4-26.7 16.1L204.8 19.8c-5.4-9.8-15.5-16.1-26.8-16.1H96C78.3 3.8 64 17.7 64 35.8V211.4L27.3 192.6c-4.8-4.5-11.9-4.3-16.1.5L3.8 222.1c-4.2 4.4-4.1 11.3.3 15.3L117.5 328c4.4 4 10.9 4.1 15.3.3l137-122.1c4.4-4 10.9-4.1 15.3.3l137 122.1c4.4 4 10.9 3.9 15.3-.3L547.2 226.6z"/>
        </svg>
        <text>首页</text>
      </view>
      <view class="nav-item" :class="{ active: activeTab === 'service' }" @click="setActive('service')">
        <svg class="icon" viewBox="0 0 512 512" width="20" height="20">
          <path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm-16 336h-48v-48c0-26.5 21.5-48 48-48s48 21.5 48 48v48h-48zm0-64h-48V192h48v80zm80 64h-48v-48c0-26.5 21.5-48 48-48s48 21.5 48 48v48h-48zm0-64h-48V192h48v80z"/>
        </svg>
        <text>客服</text>
      </view>
      <view class="nav-item" :class="{ active: activeTab === 'activation' }" @click="setActive('activation')">
        <svg class="icon" viewBox="0 0 512 512" width="20" height="20">
          <path fill="currentColor" d="M336 224h-16v-64c0-52.937-43.063-96-96-96S128 107.063 128 160v64h-16c-13.255 0-24 10.745-24 24v192c0 13.255 10.745 24 24 24h224c13.255 0 24-10.745 24-24V248c0-13.255-10.745-24-24-24zm-160 0h128v-64c0-26.467-21.533-48-48-48s-48 21.533-48 48v64z"/>
        </svg>
        <text>卡密激活</text>
      </view>
      <view class="nav-item" :class="{ active: activeTab === 'resource' }" @click="setActive('resource')">
        <svg class="icon" viewBox="0 0 512 512" width="20" height="20">
          <path fill="currentColor" d="M216 0h80c13.255 0 24 10.745 24 24v168h87.644c14.052 0 26.356 9.611 26.356 21.615V352c0 13.255-10.745 24-24 24H120c-13.255 0-24-10.745-24-24V213.615c0-12.004 12.304-21.615 26.356-21.615H192V24c0-13.255 10.745-24 24-24zm-8 256h16v64h-16v-64zm112 0h16v64h-16v-64zm40-128H144V40h120v88z"/>
        </svg>
        <text>获取资源</text>
      </view>
    </view> -->

    <!-- 激励视频广告 - 只有非VIP用户才需要 -->
    <ad-rewarded-video
      v-if="isWechat && rewardedVideoAdUnitId && isVip !== '1'"
      ref="rewardedVideoAd"
      :unit-id="rewardedVideoAdUnitId"
      @close="onRewardedVideoAdClose"
      @error="onRewardedVideoAdError"
    ></ad-rewarded-video>

    <!-- 领取资源弹窗 - 非VIP用户观看广告后显示 -->
    <uni-popup ref="resourcePopup" type="center">
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">恭喜！</text>
          <view class="close-btn" @click="closeResourcePopup">×</view>
        </view>
        <view class="popup-body">
          <text class="success-text">您已成功观看广告，可以领取学习资料了！</text>
          <button class="download-btn" @click="handleGetResource">立即领取</button>
        </view>
      </view>
    </uni-popup>

    <!-- 资源内容弹窗（可复制） -->
    <uni-popup ref="contentPopup" type="center">
      <view class="popup-content content-popup">
        <view class="popup-header">
          <text class="popup-title">资源内容</text>
          <view class="close-btn" @click="closeContentPopup">×</view>
        </view>
        <view class="popup-body content-body">
          <view v-if="loadingContent" class="loading">
            <!-- 替换 fas fa-spinner fa-spin 为内联 SVG + 动画 -->
            <svg class="icon" viewBox="0 0 512 512" width="20" height="20" style="animation: spin 1s linear infinite;">
              <path fill="currentColor" d="M288 39.056v16.632a144.02 144.02 0 0 1 76.124 122.208 144.02 144.02 0 0 1-76.124 122.208V472.944a160.022 160.022 0 0 0 86.062 138.608A160.022 160.022 0 0 0 448 472.944V139.056a160.022 160.022 0 0 0-86.062-138.608A160.022 160.022 0 0 0 288 39.056zM224 472.944V456.312a144.02 144.02 0 0 1-76.124-122.208 144.02 144.02 0 0 1 76.124-122.208V39.056a160.022 160.022 0 0 0-86.062 138.608A160.022 160.022 0 0 0 64 472.944v16.632a160.022 160.022 0 0 0 86.062 138.608A160.022 160.022 0 0 0 224 472.944z"/>
            </svg>
            <text>加载中...</text>
          </view>
          
          <view v-if="errorContent" class="error">
            <!-- 替换 fas fa-exclamation-circle 为内联 SVG -->
            <svg class="icon" viewBox="0 0 512 512" width="20" height="20">
              <path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 464c-118.7 0-216-97.3-216-216 0-118.7 97.3-216 216-216 118.7 0 216 97.3 216 216 0 118.7-97.3 216-216 216zm-24-312c0-13.3 10.7-24 24-24s24 10.7 24 24v128c0 13.3-10.7 24-24 24s-24-10.7-24-24V216zm32 224c0 17.7-14.3 32-32 32s-32-14.3-32-32-14.3-32-32-32 14.3-32 32-32 32 14.3 32 32 14.3 32 32 32z"/>
            </svg>
            <text>{{ errorContent }}</text>
          </view>
          
          <view v-if="resourceContent && !loadingContent && !errorContent" class="content-wrapper">
            <textarea 
              class="content-text" 
              :value="resourceContent" 
              readonly
              rows="8"
              placeholder="内容将显示在这里..."
            ></textarea>
            
            <view class="copy-actions">
              <button 
                class="copy-btn" 
                @click="copyToClipboard"
                :disabled="copying"
              >
                <!-- 替换 fas fa-copy 为内联 SVG -->
                <svg v-if="!copying" class="icon" viewBox="0 0 448 512" width="18" height="18">
                  <path fill="currentColor" d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"/>
                </svg>
                <!-- 替换 fas fa-spinner fa-spin 为内联 SVG + 动画 -->
                <svg v-if="copying" class="icon" viewBox="0 0 512 512" width="18" height="18" style="animation: spin 1s linear infinite;">
                  <path fill="currentColor" d="M288 39.056v16.632a144.02 144.02 0 0 1 76.124 122.208 144.02 144.02 0 0 1-76.124 122.208V472.944a160.022 160.022 0 0 0 86.062 138.608A160.022 160.022 0 0 0 448 472.944V139.056a160.022 160.022 0 0 0-86.062-138.608A160.022 160.022 0 0 0 288 39.056zM224 472.944V456.312a144.02 144.02 0 0 1-76.124-122.208 144.02 144.02 0 0 1 76.124-122.208V39.056a160.022 160.022 0 0 0-86.062 138.608A160.022 160.022 0 0 0 64 472.944v16.632a160.022 160.022 0 0 0 86.062 138.608A160.022 160.022 0 0 0 224 472.944z"/>
                </svg>
                <text>{{ copying ? '复制中...' : '手动复制' }}</text>
              </button>
              
              <text v-if="copySuccess" class="copy-success">
                <!-- 替换 fas fa-check 为内联 SVG -->
                <svg class="icon" viewBox="0 0 512 512" width="14" height="14">
                  <path fill="currentColor" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"/>
                </svg>
                已复制到剪贴板
              </text>
            </view>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { getIsVip } from '@/api/login'
import { getProjectDetail, getProjectBaidu } from '@/api/project.js';

export default {
  data() {
    return {
      isVip: '',
      userLevel: '', // 新增用于显示用户等级
      projectId: null,
      activeTab: 'home',
      isWechat: false,
      adUnitId: 'YOUR_BANNER_AD_UNIT_ID_HERE',
      rewardedVideoAdUnitId: 'YOUR_REWARDED_VIDEO_AD_UNIT_ID_HERE',
      projectDetail: {
        title: '加载中...',
        date: '加载中...',
        tag: '加载中...',
        contentTitle: '加载中...',
        projectIntro: {
          title: '项目介绍',
          description: '加载中...',
          highlight1: '加载中...',
          middleText: '加载中...',
          highlight2: '加载中...',
          endText: '加载中...'
        },
        courseCatalog: {
          title: '',
          items: []
        },
        learnButton: '立即学习此项目'
      },
      // 新增的资源内容相关数据
      resourceContent: '',
      loadingContent: false,
      errorContent: '',
      copying: false,
      copySuccess: false
    };
  },
  
  onLoad(options) {
    this.projectId = options.projectId;
    this.fetchProjectDetail();
    this.getVip();
  },
  
  methods: {
    async getVip() {
      try {
        const res = await getIsVip(); 
        console.log('VIP状态响应:', res); 
        if (res.code === 200) {
          this.isVip = res.data; 
          console.log('VIP状态赋值成功:', this.isVip);
          this.userLevel = this.isVip === "1" ? 'VIP会员' : '普通用户';
          console.log("用户等级:", this.userLevel);
        } else {
          console.error('获取VIP状态失败:', res.msg);
          this.isVip = '0'; // 默认非VIP
          this.userLevel = '普通用户';
        }
      } catch (error) {
        console.error('请求出错:', error);
        this.isVip = '0'; // 默认非VIP
        this.userLevel = '普通用户';
      }
    },
    
    setActive(tab) {
      this.activeTab = tab;
      // 页面跳转逻辑（可根据实际需求补充，如 uni.navigateTo）
    },
    
    handleLearn() {
      // VIP用户直接显示资源内容弹窗
      if (this.isVip === '1') {
        this.$refs?.contentPopup?.open(); // 安全调用，避免弹窗未加载报错
        this.fetchResourceContent();
      } 
      // 非VIP用户需要观看广告
      else if (this.isWechat && this.rewardedVideoAdUnitId) {
        uni.showLoading({ title: '加载广告...' });
        this.$refs?.rewardedVideoAd?.load().then(() => {
          uni.hideLoading();
          this.$refs?.rewardedVideoAd?.show();
        }).catch(err => {
          uni.hideLoading();
          console.error('激励视频广告加载失败:', err);
          uni.showToast({
            title: '广告加载失败，请稍后重试',
            icon: 'none'
          });
        });
      } 
      // 非微信环境的非VIP用户
      else {
        this.$refs?.resourcePopup?.open();
      }
    },
    
    onRewardedVideoAdClose(res) {
      if (res && res.isEnded) {
        console.log('用户观看了完整广告');
        this.$refs?.resourcePopup?.open();
      } else {
        console.log('用户未完整观看广告');
        uni.showToast({
          title: '观看完整广告后才能领取哦',
          icon: 'none'
        });
      }
    },
    
    onRewardedVideoAdError(err) {
      console.error('激励视频广告出错:', err);
      uni.showToast({
        title: '广告出错，请稍后重试',
        icon: 'none'
      });
    },
    
    closeResourcePopup() {
      this.$refs?.resourcePopup?.close();
    },
    
    // 处理获取资源
    async handleGetResource() {
      this.closeResourcePopup();
      this.$refs?.contentPopup?.open();
      await this.fetchResourceContent();
    },
    
    // 关闭内容弹窗
    closeContentPopup() {
      this.$refs?.contentPopup?.close();
      // 重置状态
      this.copySuccess = false;
    },
    
    // 从API获取资源内容
    async fetchResourceContent() {
      try {
        this.loadingContent = true;
        this.errorContent = '';
        this.resourceContent = '';
        
        // 调用API获取内容
        const res = await getProjectBaidu(this.projectId);
        
        if (res.code === 200 && res.data) {
          this.resourceContent = res.data;
          // 自动复制到剪贴板
          this.autoCopyToClipboard();
        } else {
          this.errorContent = '获取内容失败，请重试';
        }
      } catch (error) {
        console.error('获取资源内容失败:', error);
        this.errorContent = '网络错误，请稍后重试';
      } finally {
        this.loadingContent = false;
      }
    },
    
    // 自动复制到剪贴板
    async autoCopyToClipboard() {
      try {
        this.copying = true;
        await this.copyToClipboard(true);
      } catch (error) {
        console.error('自动复制失败:', error);
      }
    },
    
    // 复制到剪贴板功能
    async copyToClipboard(auto = false) {
      if (!this.resourceContent) return;
      
      try {
        this.copying = true;
        this.copySuccess = false;
        
        // 调用uni-app的复制API
        await uni.setClipboardData({
          data: this.resourceContent
        });
        
        // 显示成功提示
        this.copySuccess = true;
        
        // 非自动复制时显示提示消息
        if (!auto) {
          uni.showToast({
            title: '复制成功',
            icon: 'success'
          });
        }
        
        // 3秒后隐藏成功提示
        setTimeout(() => {
          this.copySuccess = false;
        }, 3000);
        
      } catch (error) {
        console.error('复制失败:', error);
        uni.showToast({
          title: '复制失败，请手动复制',
          icon: 'none'
        });
      } finally {
        this.copying = false;
      }
    },
    
    async fetchProjectDetail() {
      try {
        const res = await getProjectDetail(this.projectId);
        if (res.code === 200) {
          this.projectDetail = res.data;
          // 补充课程列表默认图标（若接口返回的 item.iconClass 缺失）
          this.projectDetail.courseCatalog.items.forEach(item => {
            if (!item.iconClass) item.iconClass = 'fas fa-code'; // 默认图标
          });
        } else {
          uni.showToast({
            title: '数据加载失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('获取项目详情失败:', error);
        uni.showToast({
          title: '请求异常',
          icon: 'none'
        });
      }
    }
  },
  
  mounted() {
    // 判断是否为微信环境
    // #ifdef MP-WEIXIN
    this.isWechat = true;
    // #endif
    // #ifndef MP-WEIXIN
    this.isWechat = false;
    // #endif
  }
};
</script>

<style scoped>
/* 删除远程 Font Awesome 引入：@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css'); */

/* 新增 SVG 图标基础样式 + 旋转动画 */
.icon {
  display: inline-block;
  vertical-align: middle;
  fill: currentColor; /* 继承父元素颜色，保持样式一致 */
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.container {
  max-width: 800px;
  margin: 0 auto;
  background: white;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  padding-bottom: 20px;
}

.header {
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  color: white;
  padding: 30px 25px;
  position: relative;
}

.title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 15px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: block;
}

.subtitle {
  font-size: 18px;
  font-weight: 500;
  opacity: 0.9;
  margin-bottom: 5px;
  display: block;
}

.meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
  font-size: 14px;
  opacity: 0.85;
}

.tag {
  background: rgba(255, 255, 255, 0.2);
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 13px;
}

.divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
  margin: 20px 0;
}

.app-promo {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 15px;
  padding: 20px;
  text-align: center;
  margin-top: 20px;
  backdrop-filter: blur(5px);
}

.ad-banner-placeholder {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
  border-radius: 8px;
  color: #888;
}

.ad-text {
  font-size: 14px;
}

.content {
  padding: 30px;
}

.section-title {
  font-size: 24px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 25px;
  position: relative;
  padding-left: 15px;
  display: block;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  height: 24px;
  width: 6px;
  background: linear-gradient(to bottom, #6a11cb, #2575fc);
  border-radius: 3px;
}

.project-desc {
  background: #f8f9ff;
  border-radius: 15px;
  padding: 25px;
  margin-bottom: 30px;
  border: 1px solid #eef2f7;
}

.project-desc .subtitle {
  color: #2c3e50;
  margin-bottom: 15px;
  font-weight: 600;
}

.desc-text {
  font-size: 16px;
  line-height: 1.8;
  color: #555;
  display: block;
}

.highlight {
  color: #2575fc;
  font-weight: 600;
}

.course-section {
  margin-top: 40px;
}

.course-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 20px;
}

.course-item {
  background: white;
  border-radius: 15px;
  padding: 25px 20px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  border: 1px solid #f0f4f9;
  transition: all 0.3s ease;
}

.course-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(37, 117, 252, 0.15);
  border-color: #d6e5ff;
}

.course-title {
  font-size: 18px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.course-title .icon {
  margin-right: 10px;
  color: #6a11cb;
  font-size: 20px;
}

.features {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.feature {
  background: #f0f7ff;
  color: #2575fc;
  padding: 8px 15px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.feature .icon {
  margin-right: 6px;
  font-size: 14px;
}

.learn-btn-container {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

.learn-btn {
  background: linear-gradient(135deg, #6a11cb, #2575fc);
  color: white;
  padding: 16px 45px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 5px 15px rgba(37, 117, 252, 0.4);
  transition: all 0.3s ease;
}

.learn-btn:active {
  transform: scale(0.95);
}

.mobile-nav {
  display: flex;
  justify-content: space-between;
  background: white;
  border-top: 1px solid #eee;
  padding: 15px 25px;
  margin-top: 30px;
  position: sticky;
  bottom: 0;
  z-index: 10;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #666;
  font-size: 12px;
  flex: 1;
  cursor: pointer;
}

.nav-item.active {
  color: #2575fc;
}

.nav-item .icon {
  font-size: 20px;
  margin-bottom: 5px;
}

/* 弹窗样式 */
.popup-content {
  width: 80vw;
  max-width: 500px;
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 内容弹窗特殊样式 */
.content-popup {
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.popup-header {
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  color: white;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.popup-title {
  font-size: 20px;
  font-weight: bold;
}

.close-btn {
  font-size: 24px;
  cursor: pointer;
  padding: 5px;
}

.popup-body {
  padding: 30px 20px;
  text-align: center;
}

/* 内容弹窗主体样式 */
.content-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.success-text {
  font-size: 16px;
  color: #333;
  margin-bottom: 25px;
  display: block;
}

.download-btn {
  background: linear-gradient(135deg, #6a11cb, #2575fc);
  color: white;
  border: none;
  padding: 12px 30px;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(37, 117, 252, 0.3);
  transition: all 0.3s ease;
}

.download-btn:active {
  transform: scale(0.95);
}

/* 内容显示区域样式 */
.content-wrapper {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.content-text {
  width: 100%;
  padding: 15px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 16px;
  line-height: 1.6;
  resize: none;
  margin-bottom: 20px;
  text-align: left;
  box-sizing: border-box;
}

.copy-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-top: 15px;
}

.copy-btn {
  background: #2575fc;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.copy-btn:disabled {
  background: #94bfff;
  cursor: not-allowed;
}

.copy-success {
  color: #10b981;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* 加载和错误状态样式 */
.loading, .error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 30px 0;
  font-size: 16px;
}

.loading .icon {
  color: #2575fc;
  font-size: 20px;
}

.error {
  color: #ef4444;
}

.error .icon {
  font-size: 20px;
}

/* 响应式调整 */
@media (max-width: 600px) {
  .course-list {
    grid-template-columns: 1fr;
  }

  .title {
    font-size: 24px;
  }

  .content {
    padding: 20px 15px;
  }
  
  .popup-content {
    width: 90vw;
  }
  
  .content-text {
    font-size: 14px;
  }
}
</style>